<script setup>
import featuresShow from './components/featuresShow.vue'
import foreignShow from './components/foreignShow.vue'
import MapShow from './components/MapShow.vue'
// import specialShow from './components/specialShow.vue'
// import systemShow from './components/systemShow.vue'
import townshipShow from './components/townshipShow.vue'
import PopulationData from './components/PopulationData.vue'
import SpecialPersonnel from './components/SpecialPersonnel.vue'
</script>

<template>
  <div class="peopleBox">
    <div class="contentLeft">
      <SpecialPersonnel />

      <foreignShow class="leftBottom" />
    </div>

    <div class="contentRight">
      <PopulationData />

      <div class="rightCenter">
        <MapShow />

        <featuresShow class="centerRight" />
      </div>

      <townshipShow class="rightBottom" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.peopleBox {
  display: flex;

  .contentLeft {
    .leftBottom {
      margin-top: 16px;
    }
  }

  .contentRight {
    flex: 1;
    margin-left: 16px;

    .rightCenter {
      display: flex;
      margin-top: 16px;

      .centerRight {
        margin-left: 16px;
      }
    }

    .rightBottom {
      margin-top: 16px;
    }
  }
}
</style>
